import React, { PureComponent } from 'react';
import * as echarts from 'echarts';

class HourlyTraffic extends PureComponent {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
    this.chart = null;
  }

  componentDidMount() {
    this.initChart();
  }

  componentDidUpdate() {
    this.updateChart();
  }

  componentWillUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
  }

  initChart = () => {
    try {
      const chartDom = this.chartRef.current;
      this.chart = echarts.init(chartDom);
      this.updateChart();
    } catch (error) {
      console.error('图表初始化失败:', error);
    }
  };

  updateChart = () => {
    if (!this.chart || !this.props.data) return;

    const { categories, series } = this.props.data;
    
    const option = {
      backgroundColor: 'transparent',
      grid: {
        left: '8%',
        right: '8%',
        bottom: '15%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: categories,
        axisLine: {
          lineStyle: {
            color: '#00d4ff'
          }
        },
        axisLabel: {
          color: '#ffffff',
          fontSize: 10
        },
        axisTick: {
          lineStyle: {
            color: '#00d4ff'
          }
        }
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 212, 255, 0.2)',
            type: 'dashed'
          }
        },
        axisLine: {
          lineStyle: {
            color: '#00d4ff'
          }
        },
        axisLabel: {
          color: '#ffffff',
          fontSize: 10
        },
        axisTick: {
          lineStyle: {
            color: '#00d4ff'
          }
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#00d4ff',
        textStyle: {
          color: '#ffffff'
        },
        formatter: function(params) {
          const hour = params[0].dataIndex;
          const value = params[0].value;
          return `${hour}:00 - ${hour + 1}:00<br/>访问量: ${value.toLocaleString()}`;
        }
      },
      series: [
        {
          name: '访问量',
          type: 'bar',
          data: series[0].data,
          itemStyle: {
            borderRadius: [2, 2, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#00ffff' },
              { offset: 0.5, color: '#0099ff' },
              { offset: 1, color: '#0066ff' }
            ])
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#66ffff' },
                { offset: 0.5, color: '#33ccff' },
                { offset: 1, color: '#0099ff' }
              ])
            }
          },
          barWidth: '60%',
          // 添加光晕效果
          markPoint: {
            data: [
              {
                type: 'max',
                name: '最大值',
                itemStyle: {
                  color: '#ffff00'
                }
              }
            ]
          }
        }
      ],
      // 添加动画效果
      animationDuration: 2000,
      animationEasing: 'elasticOut'
    };

    this.chart.setOption(option, true);

    // 添加鼠标悬停效果
    this.chart.on('mouseover', (params) => {
      this.chart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: params.dataIndex
      });
    });

    this.chart.on('mouseout', (params) => {
      this.chart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: params.dataIndex
      });
    });
  };

  render() {
    return (
      <div 
        ref={this.chartRef} 
        style={{ 
          width: '100%', 
          height: 'calc(100% - 1rem)',
          minHeight: '150px'
        }}
      />
    );
  }
}

export default HourlyTraffic; 